<template>
  <div>
    <div class="appBox">
      <div class="topReturn flex_sb">
        <div class="flex left">
          <div class="cup flex"
               @click="$router.go(-1)">
            <el-icon size="18">
              <Back />
            </el-icon>
            <div class="ruturn">返回</div>
          </div>
          <div class="title">分享海报配置</div>
        </div>
        <div>
        </div>
      </div>

      <div class="top">
        <div class="flex">
          <div class="title f16 mr30">
            提示语
          </div>
          <div class="">{参数1}为发起邀请人用户名称</div>
        </div>
        <div class="mt30">
          <el-input :autosize="{ minRows: 2, maxRows: 8}"
                    type="textarea"
                    v-model="state.content"
                    placeholder="{参数1}邀请加入兜兜智聘用工平台，入职即可获得奖励"></el-input>
        </div>
        <div class="flex mt30">
          <div class="title f16 mr30">
            海报图片
          </div>
          <div class="">为微信聊天窗口转发的预览图片</div>
          <div class="flex1 tar">
            <el-button v-preventReClick
                       type="primary"
                       plain
                       @click="methods.addtableList">添加</el-button>
            <el-button v-preventReClick
                       type="primary"
                       @click="methods.submit">保存</el-button>
          </div>
        </div>

      </div>
      <div class="tabaleBox ">
        <el-table border
                  :data="state.tableData"
                  style="width: 100%"
                  :header-cell-style="{ color: '#000' }">

          <el-table-column prop="createdAt"
                           label="上传时间"
                           show-overflow-tooltip
                           align="center"
                           width="180">
          </el-table-column>
          <el-table-column prop="name"
                           label="图片名称"
                           show-overflow-tooltip
                           align="left">
          </el-table-column>
          <el-table-column prop="orderNum"
                           label="排序"
                           width="120"
                           show-overflow-tooltip
                           align="center">
          </el-table-column>
          <el-table-column prop="useCount"
                           label="使用次数"
                           width="120"
                           show-overflow-tooltip
                           align="center">
          </el-table-column>
          <el-table-column prop="createdName"
                           label="上传人"
                           show-overflow-tooltip
                           width="120"
                           align="left">
          </el-table-column>
          <el-table-column prop=""
                           label="操作"
                           align="center"
                           width="120">
            <template #default="scope">
              <!-- 其它操作 -->
              <div @click="methods.handleAction('delete', scope.row,scope.$index)"
                   class="cup primary">删除</div>

            </template>
          </el-table-column>
        </el-table>
      </div>
      <el-dialog v-model="state.dialogVisible"
                 v-if="state.dialogVisible"
                 title="新增海报"
                 :width="$px2rem('825px')">
        <div class="imgForBox">
          <div v-for="(i,k) in state.imgList"
               :key="k"
               class="imgBorderBox flex_c"
               :class="{'active':state.imgArr.indexOf(i.id) != -1}"
               @click="methods.btnImg(i,k)">
            <img :src="JSON.parse(i.url)[0].url"
                 style="width: 90px;height: 100px;margin: 10px;"
                 alt="">
          </div>
        </div>
        <template #footer>
          <div class="dialog-footer">
            <el-button v-preventReClick
                       @click="methods.close">取消</el-button>
            <el-button v-preventReClick
                       type="primary"
                       @click="methods.addList">
              确定
            </el-button>
          </div>
        </template>
      </el-dialog>
    </div>

  </div>
</template>

<script setup>
import {
  ref,
  onMounted,
  reactive,
  toRefs,
  defineComponent,
  getCurrentInstance,
  nextTick,
} from "vue";
import { useRouter, useRoute } from "vue-router";
import { ElMessage, ElMessageBox } from "element-plus";
const router = useRouter();
const route = useRoute();
const app = getCurrentInstance()?.proxy;
const initState = () => {
  return {
    dialogVisible: false,
    totalSize: 0,
    content: '',
    tableData: [],
    params: {
      pageNum: 1,
      pageSize: 10,
      name: "",
      time: '',
    },
    valueInput: '',
    dialogData: '',
    imgList: [],
    imgArr: [],
    imgArrData: [],
  };
};
const state = reactive(initState());
onMounted(() => {
  methods.getImgList()
  methods.getDataList();
});
const methods = {
  addtableList () {
    state.imgArr = state.tableData.map(a => a.id)
    state.dialogVisible = true
  },
  close () {
    state.imgArrData = JSON.parse(JSON.stringify(state.tableData))
    state.dialogVisible = false
  },
  submit () {
    console.log(state.tableData);
    app.$post('/sysShare/update', {
      content: state.content,
      id: route.query.id,
      pictureList: state.tableData
    }).then(res => {
      if (res.code == 200) {
        ElMessage({
          message: '保存成功',
          type: 'success'
        })
        methods.getDataList()
      }
    })
  },
  addList () {
    state.tableData = JSON.parse(JSON.stringify(state.imgArrData))
    state.dialogVisible = false
  },
  btnImg (i, k) {

    let num = state.imgArr.indexOf(i.id)
    if (num == -1) {
      if (state.imgArrData.length - 0 == 10) {
        ElMessage({
          message: '最多可生成10张海报图片',
          type: 'error'
        })
        return
      }
      state.imgArr.push(i.id)
      state.imgArrData.push(i)
    } else {
      state.imgArr.splice(num, 1)
      state.imgArrData.splice(num, 1)

    }
  },
  handleAction (type, data, index) {
    switch (type) {
      case "edit":
        state.type = 'edit'
        state.dialogVisible = true
        nextTick(() => {
          app.$refs.EditorBox.valueHtml = data.content
          state.valueInput = data.title
          state.dialogData = data
        })
        break;
      case "add": //新增
        state.type = 'subAdd'
        state.valueInput = ''
        state.dialogVisible = true
        break;
      case "subAdd": //保存
        methods.subData()
        break;
      case "delete": // 删除
        ElMessageBox.confirm("请确认是否删除图片", "删除图片", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        })
          .then(() => {
            state.tableData.splice(index, 1)
          })
        break;

      case "query": //查询
        methods.getDataList();
        break;
      case "reset": // 重置
        state.params = initState().params;
        break;
    }
  },
  getImgList () {
    console.log(11);
    app.$get('/sysPicture/getListByType', { type: 1 }).then(res => {
      console.log(res);
      if (res.code == 200) {
        state.imgList = res.data
      }
    })
  },
  getDataList () {
    app.$get("/sysShare/getById", { id: route.query.id })
      .then((res) => {
        if (res.code == 200) {
          state.tableData = JSON.parse(JSON.stringify(res.data.pictureList));
          state.imgArr = res.data.pictureList.map(a => a.id)
          state.imgArrData = res.data.pictureList
          state.content = res.data.content
        }

      });
  },
  //分页变化
  handleSizeChange () {
    state.params.pageNum = 1;
    methods.getDataList();
  },
  //表格翻页
  handleCurrentChange () {
    methods.getDataList();
  },
};
</script>


<style lang="scss" scoped>
.topReturn {
  .ruturn {
    color: rgba(121, 121, 121, 1);
    font-size: 16px;
    position: relative;
    margin-left: 10px;
    margin-top: -2px;
  }
  .ruturn::before {
    content: '';
    position: absolute;
    left: 50px;
    top: 4px;
    width: 1px;
    height: 16px;
    background: rgba(121, 121, 121, 0.8);
  }
  .left {
    align-items: center;
  }
  .title {
    color: rgb(83, 83, 83);
    font-size: 16px;
    margin-left: 40px;
    font-weight: bold;
  }
}
.active {
  border: 2px solid #409eff !important;
}
.imgBorderBox {
  padding: 5px;
  border-radius: 5px;
  border: 2px solid #ccc;
  margin: 0 10px 10px 0;
}
.imgForBox {
  height: 400px;
  overflow: auto;
  display: flex;
  flex-wrap: wrap;
}
.tabaleBox {
  padding: 0 40px;
  overflow: hidden;
  flex: 1;
}
.top {
  padding: 30px 40px;
  border-radius: 5px;
}
.imgBox {
  display: flex;
  flex-wrap: wrap;
}
</style>